<template>
  <div>
    <div v-for="(item, index) in dqStations" :key="item.id + index">
      <div
        class="Stationspcs"
        :style="{ paddingLeft: leftstyle + 'px' }"
        @click="showfalgs[item.id] = showfalgs[item.id] ? false : true"
      >
        <span>
          <i
            class="iconfont"
            :class="showfalgs[item.id] ? 'iconicon-test6' : 'iconicon-test2'"
          ></i>
          {{ item.pcs }}({{ item.sum }})
        </span>
        <i
          class="iconfont"
          :class="
            Stationhasfn(item) ? 'iconicon-checkbox1' : 'iconicon-checkbox'
          "
          @click.stop="Stationtapfn(item)"
        ></i>
      </div>
      <station-box
        v-if="showfalgs[item.id]"
        :active-charge-car="activeChargeCar"
        :charge-car="ChargeCar"
        :dqpcspid="item.id"
        :leftstyle="leftstyle + 20"
        :searchfalg="searchfalg"
        :stations="Stations"
        @oneChargeCarfn="ChargeCartaponefn"
        @setactiveChargeCarfn="ChargeCartapfn"
      />
      <div
        v-for="ChargeCaritem in dqChargeCarfn(item)"
        :key="ChargeCaritem.gtel"
        class="ChargeCarbox"
        :style="{ paddingLeft: leftstyle + 20 + 'px' }"
        @click="ChargeCartaponefn(ChargeCaritem)"
      >
        <span
          style="
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
          "
        >
          <i
            class="iconfont iconicon-chongdianzhuang"
            :class="'caricon' + ChargeCaritem.gzt"
            style="font-size: 18px"
          ></i>
          {{ ChargeCaritem.mc }}({{ ChargeCaritem.gxh || 0 }})({{
            ChargeCaritem.gtel
          }})
        </span>
        <i
          class="iconfont"
          :class="
            ChargeCarhasfn(ChargeCaritem)
              ? 'iconicon-checkbox1'
              : 'iconicon-checkbox'
          "
          @click.stop="ChargeCartapfn(ChargeCaritem)"
        ></i>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'StationBox',
    props: {
      Stations: {
        default: [],
      },
      ChargeCar: {
        default: [],
      },
      dqpcspid: {
        default: '',
      },
      leftstyle: {
        default: 10,
      },
      searchfalg: {
        default: false,
      },
      activeChargeCar: {
        default: new Set(),
      },
    },
    data() {
      return {
        showfalgs: {},
      }
    },
    computed: {
      dqStations: {
        get: function () {
          return this.Stations.filter((f) => {
            return this.dqpcspid == ''
              ? f.id == this.$store.state.user.USearch.pcs
              : f.pid == this.dqpcspid
          })
        },
        set: function () {},
      },
    },
    watch: {
      dqStations() {
        this.searchfalgfn()
      },
      searchfalg(n, o) {
        if (n != o) {
          this.showfalgs = {}
          this.dqStations.forEach((e) => {
            this.showfalgs[e.id] = n
          })
        }
      },
    },
    mounted() {
      if (this.searchfalg) {
        this.searchfalgfn()
      }
    },
    methods: {
      searchfalgfn() {
        if (typeof this.dqStations == 'undefined') {
          return
        }
        this.showfalgs = {}
        this.dqStations.forEach((e) => {
          this.showfalgs[e.id] = this.searchfalg
        })
      },
      dqChargeCarfn(item) {
        if (!this.showfalgs[item.id]) {
          return []
        }
        return this.ChargeCar.filter((f) => {
          return f.pcs == item.id
        })
      },
      ChargeCarhasfn(item) {
        return this.activeChargeCar.has(item)
      },
      Stationhasfn(item) {
        let ChargeCars = this.ChargeCar.filter((f) => {
          return f.pcs == item.id
        })
        if (ChargeCars.length == 0) {
          return false
        }
        ChargeCars = ChargeCars.filter((f) => {
          return !this.activeChargeCar.has(f)
        })
        return ChargeCars.length == 0
      },
      Stationtapfn(item) {
        let ChargeCars = this.ChargeCar.filter((f) => {
          return f.pcs == item.id
        })
        if (!this.Stationhasfn(item)) {
          ChargeCars = ChargeCars.filter((f) => {
            return !this.activeChargeCar.has(f)
          })
        }
        ChargeCars.forEach((e) => {
          this.ChargeCartapfn(e)
        })
      },
      ChargeCartaponefn(item) {
        this.$emit('oneChargeCarfn', item)
      },
      ChargeCartapfn(item) {
        this.$emit('setactiveChargeCarfn', item)
      },
    },
    // :Stations="Stations" :ChargeCar="ChargeCar" :dqpcs="dqpcs"
  }
</script>
<style lang="scss" scoped>
  .Stationspcs {
    line-height: 20px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }

  .Stationspcs:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .ChargeCarbox {
    line-height: 36px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    align-items: center;
  }

  .ChargeCarbox:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .caricon1 {
    color: #2093f5 !important;
  }
</style>
